<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button class="btn1">采集核酸</button>
    <button class="btn2">采集核酸222</button>
    <script>
        function fun(){
            console.log('test 箭头函数')
        }
        let foo = function(){
            console.log('test2');
        }

        // 箭头函数 主要用来定义匿名函数
        let foo1 = ()=>{
            console.log('test3');
        }
        foo1();

        // 函数有时候有参数 有时候没有参数
        let foo2 = (a)=>{
            console.log(a);
            console.log('foo2')
        }
        foo2(1);
        // 当只有一个形参时，小括号可以省略，当没有参数时和多个参数时，小括号不能省略，按照标准写法写()=>{}
        let foo3 = a=>{
            console.log(a);
            console.log('foo3');
            return '3'
        }
        let result3 = foo3(2);
        console.log(result3);

        // 当只有一条语句时，大括号可以省略,该条语句的值就是函数的返回值
        // 当有多条语句时，大括号不能省略，若想函数有返回值，则必须写return
        // let foo4 = a=>console.log(a);
        // foo4(5);

        let foo5 = a=> a;
        // 等同下面的函数
       /*  function foo5(a){
            return a;
        } */

        let result = foo5(8);
        console.log(result);



        // 函数的返回值,有return 就是return后面的值，没有return就是undefined
        function fun11(){
            console.log('xx');
            return 'xiaowangzi';
        }
        let result11 = fun11();
        console.log(result11);
        
        // 箭头函数没有自己的this指向，它的指向为外层函数的this指向

        let btn1 = document.querySelector('.btn1');
        let btn2 = document.querySelector('.btn2');
        // dom绑定事件
        btn1.addEventListener('click',function(){
            console.log(this)
        })
        console.log(this);
        btn2.addEventListener('click',()=>{
            console.log(this);
        })
        // 箭头函数没有原型对象
        
    </script>
</body>
</html>